<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="打包站详情"></el-page-header>
            <el-form label-width="160px" class="e-m-t-45">
                <div class="flex">
                    <!-- <div class="e-flex-1">
                        <el-form-item label="编号:">
                            <span>{{ form.ysid }}</span>
                        </el-form-item>
                    </div> -->
                    <div class="e-flex-1">
                        <el-form-item label="名称:">
                            <span>{{ form.name }}</span>
                        </el-form-item>
                    </div>
                    <!-- <div class="e-flex-1">
                        <el-form-item label="联系电话:">
                            <span>{{form.mobile}}</span>
                        </el-form-item>
                    </div> -->
                </div>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="所属地区:">
                            <span>{{ form.citynames }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="地址:">
                            <span>{{ form.address }}</span>
                        </el-form-item>
                    </div>
                    <!-- <div class="e-flex-1">
                    </div> -->
                </div>
                <div>
                    <div class="flex" style="align-items: center">
                        <h4>店员管理</h4><el-button class="e-m-l-10" size="mini" @click="dialogVisible = true" type="primary">加入店员</el-button>
                    </div>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="name" label="姓名">
                        </el-table-column>
                        <el-table-column prop="mobile" label="电话">
                        </el-table-column>
                        <!-- <el-table-column prop="lastlogindatetime" label="最后登录时间">
                        </el-table-column> -->
                        <el-table-column prop="ismanager" label="是否管理员">
                            <template slot-scope="scope">
                                <span class="color-success" v-if="scope.row.ismanager">是</span>
                                <span class="color-danger" v-else>否</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button v-if="!scope.row.ismanager" @click="administrators(scope.row.id)" type="text" size="small">设置管理员</el-button>
                                <el-button @click="acdelete(scope.row.id)" type="text" size="small">离职</el-button>
                                <el-button @click="setpassword(scope.row.id)" type="text" size="small">重置密码</el-button>
                                <el-button @click="editClerk(scope.row)" type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="table-pagination">
                        <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                            :page-sizes="[10, 50, 100, 200]" :page-size="pagesize" :current-page="page"
                            @current-change="pageChange" @size-change="handleSizeChange">
                        </el-pagination>
                    </div>
                </div>
                <h4>打包站库存</h4>
                <el-table :data="form.stockdata" style="width: 100%">
                    <el-table-column fixed prop="name" label="可回收物">
                    </el-table-column>
                    <el-table-column prop="weight" label="数量（KG/件）" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.weight }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <h4>打包站订单</h4>
                <el-table :data="form.order" style="width: 100%">
                    <el-table-column fixed prop="number" label="编号">
                    </el-table-column>
                    <el-table-column prop="amount" label="订单总金额（元）" width="180">
                    </el-table-column>
                    <el-table-column prop="weight" label="订单总数量（KG/件）" width="180">
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="180">
                        <template slot-scope="scope">
                            <span class="color-success" v-if="scope.row.state == '已完结'">{{ scope.row.state }}</span>
                            <span class="color-warning" v-else>{{ scope.row.state }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="goView(scope.row.id)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div class="e-m-t-15">
                <el-button @click="goBack">返回</el-button>
            </div>
        </div>
        <!-- 店员管理 -->
        <el-dialog title="店员列表" :visible.sync="dialogVisible" width="50%">
            <el-form :inline="true" class="demo-form-inline">
                <div class="flex">
                    <el-form-item label="关键字">
                        <el-input placeholder="请输入" v-model="all.key" prefix-icon="el-icon-search"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchList(true)">查询</el-button>
                    </el-form-item>
                    <div class="e-flex-1"></div>
                    <el-form-item>
                        <el-button type="primary" plain icon="el-icon-plus" @click="createClerk">创建新店员</el-button>
                    </el-form-item>
                </div>
            </el-form>
            <el-table :data="alllsit" style="width: 100%">
                <el-table-column fixed label="店员名称">
                    <template slot-scope="scope">
                        <div class="user-face">
                            <div class="name e-p-l-15">{{ scope.row.name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号">
                </el-table-column>
                <el-table-column prop="lastlogindatetime" label="最近登录时间">
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="ac(scope.row.id)" type="text" size="small"
                            v-if="!scope.row.currentstorestaff">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="table-pagination">
                <el-pagination background layout="sizes, total, prev, pager, next" :total="all.total"
                    :page-sizes="[10, 50, 100, 200]" :page-size="all.pagesize" :current-page="all.page"
                    @current-change="pageChange2" @size-change="handleSizeChange2">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="重置店员密码" :visible.sync="dialogVisible3" width="600px" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="新的密码">
                    <el-input v-model="form.newpass" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="form.confirmpass" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetpass">确认修改</el-button>
                    <el-button @click="dialogVisible3 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="'编辑店员'" :visible.sync="dialogVisible2" width="30%">
            <el-form ref="editForm" :model="clerk" label-width="130px">
                <el-form-item label="店员姓名" prop="name">
                    <el-input v-model="clerk.name" type="text"></el-input>
                </el-form-item>
                <el-form-item label="店员电话" prop="mobile">
                    <el-input v-model="clerk.mobile" type="text"></el-input>
                </el-form-item>
                <el-form-item label="设置身份证">
                    <el-input maxlength="18" v-model="clerk.idcard" type="text"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitType('editForm')">确认</el-button>
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="'创建新店员'" :visible.sync="createDialogVisible" width="30%">
            <el-form ref="createForm" :model="clerk" label-width="130px">
                <el-form-item label="店员姓名" prop="name">
                    <el-input v-model="clerk.name" type="text"></el-input>
                </el-form-item>
                <el-form-item label="店员电话" prop="mobile">
                    <el-input v-model="clerk.mobile" type="text"></el-input>
                </el-form-item>
                <el-form-item label="设置身份证">
                    <el-input maxlength="18" v-model="clerk.idcard" type="text"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitType('createForm')">确认</el-button>
                    <el-button @click="createDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '打包站详情' 
        }
    },
    data() {
        return {
            id: 0,
            loading: true,
            clerk: {
                name: "",
                id: 0,
                mobile: '',
                idcard: ""
            },
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible3: false,
            createDialogVisible: false,
            total: 0,
            page: 1,
            pagesize: 10,
            key: '',
            alllist: [],
            all: {
                total: 0,
                page: 1,
                pagesize: 10,
                key: '',
            },
            tableData: [],
            alllsit: [],
            form: {
                id: 0,
                newpass: '',
                confirmpass: ''
            },
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.getDetails(this.id)
        this.getList()
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        getDetails(id) {
            this.loading = true
            this.$axios.get('/PackStation/Details?id=' + id).then((res) => {
                this.form = res
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        goView(id) {
            this.$router.push({
                path: '/order/store/Views?id=' + id
            })
        },
        // 店员管理相关
        submitType(formName) {
            let api = ''
            if(formName == 'editForm'){
                api = '/Admin/staff/edit'
            }else{
                api = '/Admin/staff/Create'
            }

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.post(api, this.clerk).then((res) => {
                        this.$message.success(res.msg);
                        this.dialogVisible2 = false;
                        this.createDialogVisible = false
                        this.getList()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        editClerk(row) {
            this.dialogVisible2 = true
            console.log(row)
            this.clerk.mobile = row.mobile
            this.clerk.name = row.name
            this.clerk.id = row.id
        },
        createClerk(){
            this.createDialogVisible = true
            this.clerk.mobile = null
            this.clerk.name = ''
            this.clerk.idcard = ''
        },
        resetpass() {
            this.$confirm('确认修改该店员的登录密码吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('/Admin/PackStation/staff/ResetPass', this.form).then((res) => {
                    this.$message.success(res.msg);
                    this.dialogVisible3 = false
                    this.getList()
                })
            })
        },
        setpassword(id) {
            this.form.id = id
            this.dialogVisible3 = true
        },
        administrators(id) {
            let stffid = Number(id)
            this.$confirm('此操作将该员工设置为管理员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post(`/PackStation/Staff/SetManager?storeId=${this.$route.query.id}&staffId=${id}`, {
                    // "storeId": Number(this.$route.query.id),
                    // "staffId": stffid,
                }).then((res) => {
                    console.log(res)
                    // this.$message({
                    //     message: '删除成功',
                    //     type: 'error'
                    // });
                    this.getList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        acdelete(id) {
            let stffid = Number(id)
            this.$confirm('此操作将该员工离职, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post(`/PackStation/Staff/Leave?storeId=${this.$route.query.id}&staffId=${id}`, {
                    // "storeId": Number(this.$route.query.id),
                    // "staffId": stffid,
                }).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '删除成功',
                        type: 'error'
                    });
                    this.getList()
                })
            }).catch(() => {

            });
        },
        ac(id) {
            console.log(id)
            console.log(this.$route.query.id)
            this.$axios.get(`/PackStation/Staff/Entry?storeId=${this.$route.query.id}&staffId=${id}`, {
                // "storeId": this.$route.query.id,
                // "staffId": id,
            }).then((res) => {
                console.log(res)
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                this.dialogVisible = false,
                    this.getList()

            }).catch(() => {
            })
        },
        pageChange2(e) { // 页码切换事件
            this.all.page = e;
            this.getList()
        },
        handleSizeChange2(val) {
            this.all.page = 1;
            this.all.pagesize = val;
            this.getList()
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pagesize = val;
            this.getList()
        },
        getList() {
            let param = {
                "PageIndex": this.page,
                "PageSize": this.pagesize,
                "Key": this.key,
                "packId": this.id
            }

            this.$axios.post('/PackStation/Staff/List', param).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
                // this.filterStaff();
            }).catch(() => {
            })
        },
        searchList(){
            this.$axios.post('/Store/Staff/', {
                "PageIndex": 1,
                "PageSize": 999,
                "key": this.all.key
            }).then((res) => {
                this.alllsit = res.rows;
                this.total = res.total;
                // this.filterStaff();
            }).catch(() => {
            })
        },
        // filterStaff() {
        //     var that = this;
        //     for (var i = 0; i < this.alllsit.length; i++) {
        //         var index = this.tableData.findIndex((storeStaff) => {
        //             return that.alllsit[i].id == storeStaff.id;
        //         });
        //         that.alllsit[i].currentstorestaff = index != -1;
        //     }
        // }
    }
}
</script>

<style lang="scss" scoped>
.img {
    border-radius: 5px;
    margin-right: 15px;
}
</style>
